<template>
  <div class="GeneInformation">
    <div id="back" style="padding-bottom:25px">
      <el-page-header @back="goBack" content="基因信息查询结果">
      </el-page-header>
    </div>
    <el-input placeholder="Input Gene ID" v-model="params.symbol"  style="width: 200px;margin-right: 10px" clearable></el-input>
    <el-button type="primary" style="margin-right: 10px" @click="findBySearch()">Select</el-button>

    <el-table
        :data="tableData"
        height="383"
        border
        tooltip-effect="dark"
        style="width: 100%;margin-top: 2px">
      <el-table-column
          prop="order"
          label="order"
          width="170">
      </el-table-column>
      <el-table-column
          prop="geneSymbol"
          label="geneSymbol"
          width="170">
      </el-table-column>
      <el-table-column
          prop="gene_group"
          label="gene_group"
          width="170">
      </el-table-column>
      <el-table-column
          prop="omim_id"
          label="omim_id"
          width="170">
      </el-table-column>
      <el-table-column
          prop="hgnc_id"
          label="hgnc_id"
          width="170">
      </el-table-column>
      <el-table-column
          prop="location"
          label="location"
          width="170">
      </el-table-column>
      <el-table-column
          prop="entrez_id"
          label="entrez_id"
          width="170">
      </el-table-column>
      <el-table-column
          prop="OMIM详细信息"
          label="OMIM详细信息"
          width="170">
        <template slot-scope="scope">
          <a :href="'https://www.omim.org/entry/' + scope.row.omim_id + '?search=' + encodeURIComponent(scope.row.omim_id) + '&highlight=' + encodeURIComponent(scope.row.omim_id)" target="_blank" style="color:black;text-decoration:none;">OMIM ID</a>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.pageNum"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="params.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>
  </div>

</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      params: {
        symbol: '',
        pageNum: 1,
        pageSize: 100
      },
      tableData: [],
      total: 0
    };
  },
  created() {
    this.findBySearch();
  },
  methods: {

    findBySearch(){

      request.get("/geneSearch",{
        params: this.params
      }).then(res =>{
        if(res.code === '0'){
          this.tableData=res.data.list;
          this.total=res.data.total;
        }else{
        }
      })
    },
    goBack() {
      window.location.href = "/";
    },
    handleSizeChange(pageSize){
      this.params.pageSize= pageSize;
      this.findBySearch();
    },
    handleCurrentChange(pageNum){
      this.params.pageNum=pageNum;
      this.findBySearch();
    }
  }
}

</script>